<template>
  <div class="table_content">
    <!-- <Scerh></Scerh> -->
    <el-form class="table_serch">
      <div class="table_serch_labe" style="margin-left: 0px">
        <div class="table_serch_labe_title">机种编码</div>
        <el-autocomplete
          size="mini"
          popper-class="my-autocomplete"
          @input="(e) => (formInline.recipe = validForbid(e))"
          style="width: 135px; height: 30px; margin-left: 5px; margin-top: 8px"
          v-model="formInline.recipe"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
          <!-- <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="addr">{{ item.address }}</span>
          </template> -->
        </el-autocomplete>
      </div>

      <!-- 工业 -->
      <div class="table_serch_labe" style="margin-left: 0px">
        <div class="table_serch_labe_title">工单编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            @input="(e) => (formInline.order = validForbid(e))"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.order"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 0px">
        <div class="table_serch_labe_title">线体编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            @input="(e) => (formInline.line = validForbid(e))"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.line"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 0px">
        <div class="table_serch_labe_title">站点编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            @input="(e) => (formInline.site = validForbid(e))"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.site"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 0px">
        <div class="table_serch_labe_title">班次编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            @input="(e) => (formInline.class = validname(e))"
            style="width: 130px; margin-left: 10px"
            v-model="formInline.class"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 0px">
        <div class="table_serch_labe_title">缺陷类型</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            @input="(e) => (formInline.errorcode = validForbid(e))"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.errorcode"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe">
        <div class="table_serch_labe_title" style="margin-left:0px"> 选择日期</div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.endtime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width: 135px; margin-left:5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left:0%">
        <el-button type="mini" @click="formInlineclick"
         style="height:30px;margin-top:4px"
        >查询</el-button>

        <!-- <el-button type="mini">运行</el-button>  -->
      </div>
    </el-form>

    <div class="table_chart">
      <div class="my_table">
        <el-tabs v-model="activeName" @tab-click="handleClick" id="tabsbox">
          <el-tab-pane label="缺陷总产量百分比统计(%)" name="first">
            <!-- 柱状图 -->
            <div id="myChart"></div>
            <div style="margin-top: 40px; font-size: 14px">
              缺陷总产量百分比统计
            </div>
            <div class="first_table_item">
              <!-- 年  度数据表格 -->
              <div>
                <el-table
                  class="tableyon"
                  :data="this.yiedate"
                  border
                  size="small"
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '2px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!--插入表格 -->
                  <el-table-column width="75">
                    <template scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column width="75" :label="this.ywiedate">
                    <template scope="scope">
                      <span>{{ scope.row.year_1 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!--季度 数据表格 -->
              <div>
                <el-table
                  :data="this.quartdate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!--插入表格 -->
                  <!-- 一 季度 -->
                  <!-- <el-table-column> </el-table-column> -->
                  <el-table-column width="60" :label="this.quarter_1">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_1 }}</span>
                    </template>
                  </el-table-column>

                  <!-- 二季度 -->
                  <el-table-column width="60" :label="this.quarter_2">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column></el-table-column> -->
                </el-table>
              </div>

              <!-- 月份 数据表格 -->
              <div>
                <el-table
                  :data="this.monthdate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--插入表格 -->
                  <!-- 1 月 -->

                  <el-table-column width="64" height="10" :label="this.month_1">
                    <template scope="scope">
                      <span>{{ scope.row.month_1 }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column width="64" :label="this.month_2">
                    <template scope="scope">
                      <span>{{ scope.row.month_2 }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column width="64" :label="this.month_3">
                    <template scope="scope">
                      <span>{{ scope.row.month_3 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!--周  数据表格 -->
              <div>
                <el-table
                  :data="this.weekdate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--1 周-->
                  <!-- <el-table-column></el-table-column> -->

                  <el-table-column width="64" :label="this.weekdate1">
                    <template scope="scope">
                      <span>{{ scope.row.week_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2周 -->

                  <el-table-column width="64" :label="this.weekdate2">
                    <template scope="scope">
                      <span>{{ scope.row.week_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3周 -->

                  <el-table-column width="64" :label="this.weekdate3">
                    <template scope="scope">
                      <span>{{ scope.row.week_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4周 -->

                  <el-table-column width="64" :label="this.weekdate4">
                    <template scope="scope">
                      <span>{{ scope.row.week_4 }}</span>
                    </template>
                  </el-table-column>

                  <!-- <el-table-column></el-table-column> -->
                </el-table>
              </div>

              <!-- 天  数据表格 -->
              <div>
                <el-table
                  :data="this.daydate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!-- 1 天 -->

                  <el-table-column width="74" :label="this.day1">
                    <template scope="scope">
                      <span>{{ scope.row.day_1 }}</span>
                    </template>
                  </el-table-column>
                  <!--2 天 -->

                  <el-table-column width="74" :label="this.day2">
                    <template scope="scope">
                      <span>{{ scope.row.day_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3天 -->
                  <el-table-column width="74" :label="this.day3">
                    <template scope="scope">
                      <span>{{ scope.row.day_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4天 -->
                  <el-table-column width="74" :label="this.day4">
                    <template scope="scope">
                      <span>{{ scope.row.day_4 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 5天 -->
                  <el-table-column width="74" :label="this.day5">
                    <template scope="scope">
                      <span>{{ scope.row.day_5 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 6天 -->
                  <el-table-column width="74" :label="this.day6">
                    <template scope="scope">
                      <span>{{ scope.row.day_6 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 7天 -->

                  <el-table-column width="74" :label="this.day7">
                    <template scope="scope">
                      <span>{{ scope.row.day_7 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="缺陷个数量统计(个数)" name="second">
            <!-- 第二个柱状图 -->
            <div id="my_second"></div>
            <div style="margin-top: 40px; font-size: 14px">缺陷个数量统计</div>
            <div class="second_table_item">
              <!-- 年度 -->
              <div>
                <el-table
                  :data="this.yienum"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '2px', width: '20px' }"
                  size="small"
                  style="font-size: 9px"
                >
                  <!--插入表格 -->
                  <el-table-column size="small" width="75">
                    <template scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="this.defeNum.ywiedate" width="75">
                    <template scope="scope">
                      <span>{{ scope.row.year_1 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!-- 季度 -->
              <div>
                <el-table
                  :data="this.quartnum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '44px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size:6px"
                >
                  <!--插入表格 -->
                  <!-- 一 季度 -->
                  <!-- <el-table-column> </el-table-column> -->
                  <el-table-column width="67.6"   :label="this.defeNum.quarter_1">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_1 }}</span>
                    </template>
                  </el-table-column>

                  <!-- 二季度 -->

                  <el-table-column width="68" :label="this.defeNum.quarter_1">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column></el-table-column> -->
                </el-table>
              </div>

              <!--月度 -->
              <div>
                <el-table
                  :data="this.monthnum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--插入表格 -->

                  <el-table-column width="64" :label="this.defeNum.month_1">
                    <template scope="scope">
                      <span>{{ scope.row.month_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2 月 -->

                  <el-table-column width="64" :label="this.defeNum.month_2">
                    <template scope="scope">
                      <span>{{ scope.row.month_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3 月 -->

                  <el-table-column width="64" :label="this.defeNum.month_3">
                    <template scope="scope">
                      <span>{{ scope.row.month_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column></el-table-column> -->
                </el-table>
              </div>

              <!-- 周  -->
              <div>
                <el-table
                  :data="this.weeknum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--1 周-->

                  <el-table-column width="64" :label="this.defeNum.weekdate1">
                    <template scope="scope">
                      <span>{{ scope.row.week_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2周 -->

                  <el-table-column width="64" :label="this.defeNum.weekdate2">
                    <template scope="scope">
                      <span>{{ scope.row.week_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3周 -->

                  <el-table-column width="64" :label="this.defeNum.weekdate3">
                    <template scope="scope">
                      <span>{{ scope.row.week_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4周 -->

                  <el-table-column width="64" :label="this.defeNum.weekdate4">
                    <template scope="scope">
                      <span>{{ scope.row.week_4 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!-- 天 -->
              <div>
                <el-table
                  :data="this.daynum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!-- <el-table-column></el-table-column> -->
                  <!-- 1 天 -->

                  <el-table-column width="74" :label="this.defeNum.day1">
                    <template scope="scope">
                      <span>{{ scope.row.day_1 }}</span>
                    </template>
                  </el-table-column>
                  <!--2 天 -->

                  <el-table-column width="74" :label="this.defeNum.day2">
                    <template scope="scope">
                      <span>{{ scope.row.day_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3天 -->

                  <el-table-column width="74" :label="this.defeNum.day3">
                    <template scope="scope">
                      <span>{{ scope.row.day_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4天 -->

                  <el-table-column width="74" :label="this.defeNum.day4">
                    <template scope="scope">
                      <span>{{ scope.row.day_4 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 5天 -->

                  <el-table-column width="74" :label="this.defeNum.day5">
                    <template scope="scope">
                      <span>{{ scope.row.day_5 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 6天 -->

                  <el-table-column width="74" :label="this.defeNum.day6">
                    <template scope="scope">
                      <span>{{ scope.row.day_6 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 7天 -->

                  <el-table-column width="74" :label="this.defeNum.day7">
                    <template scope="scope">
                      <span>{{ scope.row.day_7 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="缺陷/NG总数量" name="third">
            <!-- 第三个柱状图 -->
            <div id="mythreebar"></div>
            <div style="margin-top: 40px; font-size: 14px">
              缺陷/NG总数量统计
            </div>
            <div class="third_table_item">
              <!-- 年度 -->
              <div>
                <el-table
                  :data="this.yieNg"
                  border
                  size="small"
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '2px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!--插入表格 -->
                  <el-table-column size="small" width="70">
                    <template scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column :label="this.defeNg.ywiedate" width="70">
                    <template scope="scope">
                      <span>{{ scope.row.year_1 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 季度 -->
              <div>
                <el-table
                  :data="this.quartNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!--插入表格 -->
                  <!-- 一 季度 -->

                  <el-table-column :label="this.defeNg.quarter_1" width="60">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_1 }}</span>
                    </template>
                  </el-table-column>

                  <!-- 二季度 -->

                  <el-table-column :label="this.defeNg.quarter_2" width="60">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_2 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 月份 -->
              <div>
                <el-table
                  :data="this.monthNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--插入表格 -->
                  <!-- 1 月 -->
                  <el-table-column :label="this.defeNg.month_1" width="64">
                    <template scope="scope">
                      <span>{{ scope.row.month_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2 月 -->

                  <el-table-column :label="this.defeNg.month_2" width="64">
                    <template scope="scope">
                      <span>{{ scope.row.month_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3 月 -->

                  <el-table-column :label="this.defeNg.month_3" width="64">
                    <template scope="scope">
                      <span>{{ scope.row.month_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column></el-table-column> -->
                </el-table>
              </div>
              <!-- 周  -->
              <div>
                <el-table
                  :data="this.weekNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--1 周-->

                  <el-table-column :label="this.defeNg.weekdate1" width="69">
                    <template scope="scope">
                      <span>{{ scope.row.week_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2周 -->

                  <el-table-column :label="this.defeNg.weekdate2" width="69">
                    <template scope="scope">
                      <span>{{ scope.row.week_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3周 -->

                  <el-table-column :label="this.defeNg.weekdate3" width="69">
                    <template scope="scope">
                      <span>{{ scope.row.week_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4周 -->

                  <el-table-column :label="this.defeNg.weekdate4" width="69">
                    <template scope="scope">
                      <span>{{ scope.row.week_4 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 天 -->
              <div>
                <el-table
                  :data="this.dayNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '40px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 9px"
                >
                  <!-- 1 天 -->

                  <el-table-column :label="this.defeNg.day1" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_1 }}</span>
                    </template>
                  </el-table-column>
                  <!--2 天 -->

                  <el-table-column :label="this.defeNg.day2" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3天 -->

                  <el-table-column :label="this.defeNg.day3" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4天 -->

                  <el-table-column :label="this.defeNg.day4" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_4 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 5天 -->

                  <el-table-column :label="this.defeNg.day5" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_5 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 6天 -->

                  <el-table-column :label="this.defeNg.day6" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_6 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 7天 -->

                  <el-table-column :label="this.defeNg.day7" width="74">
                    <template scope="scope">
                      <span>{{ scope.row.day_7 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中... ....</div>
      <div class="table_timer">网络请求延时: {{ timer }}秒</div>
    </div>
      <Popup v-show="Popup_show" @ClosePopup="ClosePopup"  @cancelget="cancelget"  :timer='timer'></Popup>
  </div>
</template>
<script>
import axios from "axios";
import Popup from '../../Pop-up/Pop-up'
export default {
  components: {
    Popup
  },
  data() {
    return {
      Popup_show:false,
      timer: 0,
      isshow: false,
      cancel: null,
      valtimer: "",
      Popup_timer: "",
      formInline: {
        recipe: "VR2-1-24",
        order: "",
        line: "",
        site: "",
        // starttime: "",
        endtime: "2021-01-10",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      restaurants: [],
      activeName: "first",
      myChart: "",
      list: [],
      yiedate: [],
      quartdate: [],
      monthdate: [],
      weekdate: [],
      daydate: [],
      yienum: [],
      quartnum: [],
      monthnum: [],
      weeknum: [],
      daynum: [],
      yieNg: [],
      quartNg: [],
      monthNg: [],
      weekNg: [],
      dayNg: [],

      inYield: [],
      defectNum: [],
      inNg: [],
      ywiedate: "",
      quarter_1: "",
      quarter_2: "",
      month_1: "",
      month_2: "",
      month_3: "",
      weekdate1: "",
      weekdate2: "",
      weekdate3: "",
      weekdate4: "",
      day1: "",
      day2: "",
      day3: "",
      day4: "",
      day5: "",
      day6: "",
      day7: "",
      defeNum: {
        ywiedate: "",
        quarter_1: "",
        quarter_2: "",
        month_1: "",
        month_2: "",
        month_3: "",
        weekdate1: "",
        weekdate2: "",
        weekdate3: "",
        weekdate4: "",
        day1: "",
        day2: "",
        day3: "",
        day4: "",
        day5: "",
        day6: "",
        day7: "",
      },
      defeNg: {
        ywiedate: "",
        quarter_1: "",
        quarter_2: "",
        month_1: "",
        month_2: "",
        month_3: "",
        weekdate1: "",
        weekdate2: "",
        weekdate3: "",
        weekdate4: "",
        day1: "",
        day2: "",
        day3: "",
        day4: "",
        day5: "",
        day6: "",
        day7: "",
      },
    };
  },

  mounted() {
    // this.restaurants = this.loadAll();
    // this.timerclick();
  },
  methods: {
    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    formInlineclick() {
      setTimeout(() => {
        if (this.inYield.length == '') {
          this.Popup_show = true
          this.Popup_timer = setInterval(() => {
            this.timer++;
          }, 1000);
        }else{
          return 
        }
      }, 5000);

      ////判断是否有网络 显示弹窗
      if (navigator.onLine) {
        console.log("网络已连接");
        this.removetmer();
      } else {
        console.log("已断网");
        setTimeout(() => {
          this.timerclick();
        }, 3000);
      }

      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime == "") {
        this.$alert("日期不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: "get",
          method: "GET",
          params: {
            data: this.formInline,
          },
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var rulst = res.data;
          if (rulst.code == 200) {
            console.log("1111111111111111111111111");
            this.inYield = rulst.data.inYield;
            this.defectNum = rulst.data.defectNum;
            this.inNg = rulst.data.inNg;
            this.list = rulst.data;
            if (this.inYield) {
              this.getlist("myChart");
              this.myhistogram();
              this.theerbra();
            } else if (res.data.code == 204) {
              this.$alert("查询结果未能返回，请再次查询", "消息提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
            }
            this.alsysdata();
          } else if (rulst.code == 204) {
            this.$alert(rulst.message, "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        });
      }
    },

     ClosePopup(){
       this.Popup_show = false;
       clearInterval(this.Popup_timer);
     },



    cancelget() {
      console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },

    alsysdata() {
      this.yiedate = this.list.inYield.year; //缺陷总产量百分比统计
      this.quartdate = this.list.inYield.quarter;
      this.monthdate = this.list.inYield.month;
      this.weekdate = this.list.inYield.week;
      this.daydate = this.list.inYield.day;
      this.ywiedate = this.yiedate[0].year_1_date;
      this.quarter_1 = this.quartdate[0].quarter_1_date;
      this.quarter_2 = this.quartdate[1].quarter_2_date;
      this.month_1 = this.monthdate[0].month_1_date;
      this.month_2 = this.monthdate[0].month_2_date;
      this.month_3 = this.monthdate[0].month_3_date;
      this.weekdate1 = this.weekdate[0].week_1_date;
      this.weekdate2 = this.weekdate[0].week_2_date;
      this.weekdate3 = this.weekdate[0].week_3_date;
      this.weekdate4 = this.weekdate[0].week_4_date;
      this.day1 = this.daydate[0].day_1_date;
      this.day2 = this.daydate[0].day_2_date;
      this.day3 = this.daydate[0].day_3_date;
      this.day4 = this.daydate[0].day_4_date;
      this.day5 = this.daydate[0].day_5_date;
      this.day6 = this.daydate[0].day_6_date;
      this.day7 = this.daydate[0].day_7_date;

      this.yienum = this.list.defectNum.year; //缺陷个数统计
      this.quartnum = this.list.defectNum.quarter;
      this.monthnum = this.list.defectNum.month;
      this.weeknum = this.list.defectNum.week;
      this.daynum = this.list.defectNum.day;
      this.defeNum.ywiedate = this.yienum[0].year_1_date;
      this.defeNum.quarter_1 = this.quartnum[0].quarter_1_date;
      this.defeNum.quarter_2 = this.quartnum[0].quarter_2_date;
      this.defeNum.month_1 = this.monthnum[0].month_1_date;
      this.defeNum.month_2 = this.monthnum[0].month_2_date;
      this.defeNum.month_3 = this.monthnum[0].month_3_date;
      this.defeNum.weekdate1 = this.weeknum[0].week_1_date;
      this.defeNum.weekdate2 = this.weeknum[0].week_2_date;
      this.defeNum.weekdate3 = this.weeknum[0].week_3_date;
      this.defeNum.weekdate4 = this.weeknum[0].week_4_date;
      this.defeNum.day1 = this.daynum[0].day_1_date;
      this.defeNum.day2 = this.daynum[0].day_2_date;
      this.defeNum.day3 = this.daynum[0].day_3_date;
      this.defeNum.day4 = this.daynum[0].day_4_date;
      this.defeNum.day5 = this.daynum[0].day_5_date;
      this.defeNum.day6 = this.daynum[0].day_6_date;
      this.defeNum.day7 = this.daynum[0].day_7_date;
      // console.log("12345676543234567", this.yienum);
      this.yieNg = this.list.inNg.year;
      this.quartNg = this.list.inNg.quarter;
      this.monthNg = this.list.inNg.month;
      this.weekNg = this.list.inNg.week;
      this.dayNg = this.list.inNg.day;
      this.defeNg.ywiedate = this.yieNg[0].year_1_date;
      this.defeNg.quarter_1 = this.quartNg[0].quarter_1_date;
      this.defeNg.quarter_2 = this.quartNg[0].quarter_2_date;
      this.defeNg.month_1 = this.monthNg[0].month_1_date;
      this.defeNg.month_2 = this.monthNg[0].month_2_date;
      this.defeNg.month_3 = this.monthNg[0].month_3_date;
      this.defeNg.weekdate1 = this.weekNg[0].week_1_date;
      this.defeNg.weekdate2 = this.weekNg[0].week_2_date;
      this.defeNg.weekdate3 = this.weekNg[0].week_3_date;
      this.defeNg.weekdate4 = this.weekNg[0].week_4_date;
      this.defeNg.day1 = this.dayNg[0].day_1_date;
      this.defeNg.day2 = this.dayNg[0].day_2_date;
      this.defeNg.day3 = this.dayNg[0].day_3_date;
      this.defeNg.day4 = this.dayNg[0].day_4_date;
      this.defeNg.day5 = this.dayNg[0].day_5_date;
      this.defeNg.day6 = this.dayNg[0].day_6_date;
      this.defeNg.day7 = this.dayNg[0].day_7_date;
    },
    // loadAll() {
    //   return [{ value: "", address: "" }];
    // },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },

    // 第一个柱状图
    getlist(id) {
      var keyname = [];
      // var listyear = [];
      var BlackDotlist = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      var totallist = [];

      for (let i = 0; i < this.inYield.year.length; i++) {
        keyname.push(this.inYield.year[i].name);
        if (this.inYield.year[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "Block") {
          Blocklist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "Line") {
          Linelist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "Mura") {
          Muralist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "total") {
          totallist.push(this.inYield.year[i].year_1);
        }
      }

      for (let i = 0; i < this.inYield.quarter.length; i++) {
        if (this.inYield.quarter[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.quarter[i].quarter_1);
          BlackDotlist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "Block") {
          Blocklist.push(this.inYield.quarter[i].quarter_1);
          Blocklist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.quarter[i].quarter_1);
          BrightDotlist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "Line") {
          Linelist.push(this.inYield.quarter[i].quarter_1);
          Linelist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "Mura") {
          Muralist.push(this.inYield.quarter[i].quarter_1);
          Muralist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "total") {
          totallist.push(this.inYield.quarter[i].quarter_1);
          totallist.push(this.inYield.quarter[i].quarter_2);
        }
      }

      for (let i = 0; i < this.inYield.month.length; i++) {
        if (this.inYield.month[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.month[i].month_1);
          BlackDotlist.push(this.inYield.month[i].month_2);
          BlackDotlist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "Block") {
          Blocklist.push(this.inYield.month[i].month_1);
          Blocklist.push(this.inYield.month[i].month_2);
          Blocklist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.month[i].month_1);
          BrightDotlist.push(this.inYield.month[i].month_2);
          BrightDotlist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "Line") {
          Linelist.push(this.inYield.month[i].month_1);
          Linelist.push(this.inYield.month[i].month_2);
          Linelist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "Mura") {
          Muralist.push(this.inYield.month[i].month_1);
          Muralist.push(this.inYield.month[i].month_2);
          Muralist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "total") {
          totallist.push(this.inYield.month[i].month_1);
          totallist.push(this.inYield.month[i].month_2);
          totallist.push(this.inYield.month[i].month_3);
        }
      }

      for (let i = 0; i < this.inYield.week.length; i++) {
        if (this.inYield.week[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.week[i].week_1);
          BlackDotlist.push(this.inYield.week[i].week_2);
          BlackDotlist.push(this.inYield.week[i].week_3);
          BlackDotlist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "Block") {
          Blocklist.push(this.inYield.week[i].week_1);
          Blocklist.push(this.inYield.week[i].week_2);
          Blocklist.push(this.inYield.week[i].week_3);
          Blocklist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.week[i].week_1);
          BrightDotlist.push(this.inYield.week[i].week_2);
          BrightDotlist.push(this.inYield.week[i].week_3);
          BrightDotlist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "Line") {
          Linelist.push(this.inYield.week[i].week_1);
          Linelist.push(this.inYield.week[i].week_2);
          Linelist.push(this.inYield.week[i].week_3);
          Linelist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "Mura") {
          Muralist.push(this.inYield.week[i].week_1);
          Muralist.push(this.inYield.week[i].week_2);
          Muralist.push(this.inYield.week[i].week_3);
          Muralist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "total") {
          totallist.push(this.inYield.week[i].week_1);
          totallist.push(this.inYield.week[i].week_2);
          totallist.push(this.inYield.week[i].week_3);
          totallist.push(this.inYield.week[i].week_4);
        }
      }

      for (let i = 0; i < this.inYield.day.length; i++) {
        if (this.inYield.day[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.day[i].day_1);
          BlackDotlist.push(this.inYield.day[i].day_2);
          BlackDotlist.push(this.inYield.day[i].day_3);
          BlackDotlist.push(this.inYield.day[i].day_4);
          BlackDotlist.push(this.inYield.day[i].day_5);
          BlackDotlist.push(this.inYield.day[i].day_6);
          BlackDotlist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "Block") {
          Blocklist.push(this.inYield.day[i].day_1);
          Blocklist.push(this.inYield.day[i].day_2);
          Blocklist.push(this.inYield.day[i].day_3);
          Blocklist.push(this.inYield.day[i].day_4);
          Blocklist.push(this.inYield.day[i].day_5);
          Blocklist.push(this.inYield.day[i].day_6);
          Blocklist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.day[i].day_1);
          BrightDotlist.push(this.inYield.day[i].day_2);
          BrightDotlist.push(this.inYield.day[i].day_3);
          BrightDotlist.push(this.inYield.day[i].day_4);
          BrightDotlist.push(this.inYield.day[i].day_5);
          BrightDotlist.push(this.inYield.day[i].day_6);
          BrightDotlist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "Line") {
          Linelist.push(this.inYield.day[i].day_1);
          Linelist.push(this.inYield.day[i].day_2);
          Linelist.push(this.inYield.day[i].day_3);
          Linelist.push(this.inYield.day[i].day_4);
          Linelist.push(this.inYield.day[i].day_5);
          Linelist.push(this.inYield.day[i].day_6);
          Linelist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "Mura") {
          Muralist.push(this.inYield.day[i].day_1);
          Muralist.push(this.inYield.day[i].day_2);
          Muralist.push(this.inYield.day[i].day_3);
          Muralist.push(this.inYield.day[i].day_4);
          Muralist.push(this.inYield.day[i].day_5);
          Muralist.push(this.inYield.day[i].day_6);
          Muralist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "total") {
          totallist.push(this.inYield.day[i].day_1);
          totallist.push(this.inYield.day[i].day_2);
          totallist.push(this.inYield.day[i].day_3);
          totallist.push(this.inYield.day[i].day_4);
          totallist.push(this.inYield.day[i].day_5);
          totallist.push(this.inYield.day[i].day_6);
          totallist.push(this.inYield.day[i].day_7);
        }
      }
      this.myChart = this.$echarts.init(document.getElementById(id));
      this.myChart.setOption({
        option: true,
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
        },
        grid: {
          left: "0%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "天(1)",
            "天(2)",
            "天(3)",
            "天(4)",
            "天(5)",
            "天(6)",
            "天(7)",
          ],
          left: 10,
        },
        yAxis: {
          type: "value",
          inverse: false,
          // max:10,
          // nameGap:25,
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BlackDotlist,
          },
          {
            name: "Block",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            // data:[20,10,10,10]
            data: Blocklist,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDotlist,
          },
          {
            name: "Line",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Linelist,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Muralist,
          },
          {
            name: "Total",
            type: "line",
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: totallist,
          },
        ],
      });
    },

    // //  第二个柱状图
    myhistogram() {
      var keyname = [];
      var BlackDotlist = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      var totallist = [];
      // 年
      // var year_a = this.defectNum.year;
      for (let i = 0; i < this.defectNum.year.length; i++) {
        keyname.push(this.defectNum.year[i].name);
        if (this.defectNum.year[i].name == "BlackDot") {
          BlackDotlist.push(this.defectNum.year[i].year_1);
        } else if (this.defectNum.year[i].name == "Block") {
          Blocklist.push(this.defectNum.year[i].year_1);
        } else if (this.defectNum.year[i].name == "BrightDot") {
          BrightDotlist.push(this.defectNum.year[i].year_1);
        } else if (this.defectNum.year[i].name == "Line") {
          Linelist.push(this.defectNum.year[i].year_1);
        } else if (this.defectNum.year[i].name == "Mura") {
          Muralist.push(this.defectNum.year[i].year_1);
        } else if (this.defectNum.year[i].name == "total") {
          totallist.push(this.defectNum.year[i].year_1);
        }
      }

      for (let i = 0; i < this.defectNum.quarter.length; i++) {
        if (this.defectNum.quarter[i].name == "BlackDot") {
          BlackDotlist.push(this.defectNum.quarter[i].quarter_1);
          BlackDotlist.push(this.defectNum.quarter[i].quarter_2);
        } else if (this.defectNum.quarter[i].name == "Block") {
          Blocklist.push(this.defectNum.quarter[i].quarter_1);
          Blocklist.push(this.defectNum.quarter[i].quarter_2);
        } else if (this.defectNum.quarter[i].name == "BrightDot") {
          BrightDotlist.push(this.defectNum.quarter[i].quarter_1);
          BrightDotlist.push(this.defectNum.quarter[i].quarter_2);
        } else if (this.defectNum.quarter[i].name == "Line") {
          Linelist.push(this.defectNum.quarter[i].quarter_1);
          Linelist.push(this.defectNum.quarter[i].quarter_2);
        } else if (this.defectNum.quarter[i].name == "Mura") {
          Muralist.push(this.defectNum.quarter[i].quarter_1);
          Muralist.push(this.defectNum.quarter[i].quarter_2);
        } else if (this.defectNum.quarter[i].name == "total") {
          totallist.push(this.defectNum.quarter[i].quarter_1);
          totallist.push(this.defectNum.quarter[i].quarter_2);
        }
      }

      for (let i = 0; i < this.defectNum.month.length; i++) {
        if (this.defectNum.month[i].name == "BlackDot") {
          BlackDotlist.push(this.defectNum.month[i].month_1);
          BlackDotlist.push(this.defectNum.month[i].month_2);
          BlackDotlist.push(this.defectNum.month[i].month_3);
        } else if (this.defectNum.month[i].name == "Block") {
          Blocklist.push(this.defectNum.month[i].month_1);
          Blocklist.push(this.defectNum.month[i].month_2);
          Blocklist.push(this.defectNum.month[i].month_3);
        } else if (this.defectNum.month[i].name == "BrightDot") {
          BrightDotlist.push(this.defectNum.month[i].month_1);
          BrightDotlist.push(this.defectNum.month[i].month_2);
          BrightDotlist.push(this.defectNum.month[i].month_3);
        } else if (this.defectNum.month[i].name == "Line") {
          Linelist.push(this.defectNum.month[i].month_1);
          Linelist.push(this.defectNum.month[i].month_2);
          Linelist.push(this.defectNum.month[i].month_3);
        } else if (this.defectNum.month[i].name == "Mura") {
          Muralist.push(this.defectNum.month[i].month_1);
          Muralist.push(this.defectNum.month[i].month_2);
          Muralist.push(this.defectNum.month[i].month_3);
        } else if (this.defectNum.month[i].name == "total") {
          totallist.push(this.defectNum.month[i].month_1);
          totallist.push(this.defectNum.month[i].month_2);
          totallist.push(this.defectNum.month[i].month_3);
        }
      }

      for (let i = 0; i < this.defectNum.week.length; i++) {
        if (this.defectNum.week[i].name == "BlackDot") {
          BlackDotlist.push(this.defectNum.week[i].week_1);
          BlackDotlist.push(this.defectNum.week[i].week_2);
          BlackDotlist.push(this.defectNum.week[i].week_3);
          BlackDotlist.push(this.defectNum.week[i].week_4);
        } else if (this.defectNum.week[i].name == "Block") {
          Blocklist.push(this.defectNum.week[i].week_1);
          Blocklist.push(this.defectNum.week[i].week_2);
          Blocklist.push(this.defectNum.week[i].week_3);
          Blocklist.push(this.defectNum.week[i].week_4);
        } else if (this.defectNum.week[i].name == "BrightDot") {
          BrightDotlist.push(this.defectNum.week[i].week_1);
          BrightDotlist.push(this.defectNum.week[i].week_2);
          BrightDotlist.push(this.defectNum.week[i].week_3);
          BrightDotlist.push(this.defectNum.week[i].week_4);
        } else if (this.defectNum.week[i].name == "Line") {
          Linelist.push(this.defectNum.week[i].week_1);
          Linelist.push(this.defectNum.week[i].week_2);
          Linelist.push(this.defectNum.week[i].week_3);
          Linelist.push(this.defectNum.week[i].week_4);
        } else if (this.defectNum.week[i].name == "Mura") {
          Muralist.push(this.defectNum.week[i].week_1);
          Muralist.push(this.defectNum.week[i].week_2);
          Muralist.push(this.defectNum.week[i].week_3);
          Muralist.push(this.defectNum.week[i].week_4);
        } else if (this.defectNum.week[i].name == "total") {
          totallist.push(this.defectNum.week[i].week_1);
          totallist.push(this.defectNum.week[i].week_2);
          totallist.push(this.defectNum.week[i].week_3);
          totallist.push(this.defectNum.week[i].week_4);
        }
      }

      for (let i = 0; i < this.defectNum.day.length; i++) {
        if (this.defectNum.day[i].name == "BlackDot") {
          BlackDotlist.push(this.defectNum.day[i].day_1);
          BlackDotlist.push(this.defectNum.day[i].day_2);
          BlackDotlist.push(this.defectNum.day[i].day_3);
          BlackDotlist.push(this.defectNum.day[i].day_4);
          BlackDotlist.push(this.defectNum.day[i].day_5);
          BlackDotlist.push(this.defectNum.day[i].day_6);
          BlackDotlist.push(this.defectNum.day[i].day_7);
        } else if (this.defectNum.day[i].name == "Block") {
          Blocklist.push(this.defectNum.day[i].day_1);
          Blocklist.push(this.defectNum.day[i].day_2);
          Blocklist.push(this.defectNum.day[i].day_3);
          Blocklist.push(this.defectNum.day[i].day_4);
          Blocklist.push(this.defectNum.day[i].day_5);
          Blocklist.push(this.defectNum.day[i].day_6);
          Blocklist.push(this.defectNum.day[i].day_7);
        } else if (this.defectNum.day[i].name == "BrightDot") {
          BrightDotlist.push(this.defectNum.day[i].day_1);
          BrightDotlist.push(this.defectNum.day[i].day_2);
          BrightDotlist.push(this.defectNum.day[i].day_3);
          BrightDotlist.push(this.defectNum.day[i].day_4);
          BrightDotlist.push(this.defectNum.day[i].day_5);
          BrightDotlist.push(this.defectNum.day[i].day_6);
          BrightDotlist.push(this.defectNum.day[i].day_7);
        } else if (this.defectNum.day[i].name == "Line") {
          Linelist.push(this.defectNum.day[i].day_1);
          Linelist.push(this.defectNum.day[i].day_2);
          Linelist.push(this.defectNum.day[i].day_3);
          Linelist.push(this.defectNum.day[i].day_4);
          Linelist.push(this.defectNum.day[i].day_5);
          Linelist.push(this.defectNum.day[i].day_6);
          Linelist.push(this.defectNum.day[i].day_7);
        } else if (this.defectNum.day[i].name == "Mura") {
          Muralist.push(this.defectNum.day[i].day_1);
          Muralist.push(this.defectNum.day[i].day_2);
          Muralist.push(this.defectNum.day[i].day_3);
          Muralist.push(this.defectNum.day[i].day_4);
          Muralist.push(this.defectNum.day[i].day_5);
          Muralist.push(this.defectNum.day[i].day_6);
          Muralist.push(this.defectNum.day[i].day_7);
        } else if (this.defectNum.day[i].name == "total") {
          totallist.push(this.defectNum.day[i].day_1);
          totallist.push(this.defectNum.day[i].day_2);
          totallist.push(this.defectNum.day[i].day_3);
          totallist.push(this.defectNum.day[i].day_4);
          totallist.push(this.defectNum.day[i].day_5);
          totallist.push(this.defectNum.day[i].day_6);
          totallist.push(this.defectNum.day[i].day_7);
        }
      }
      let my_second = this.$echarts.init(document.getElementById("my_second"));
      my_second.setOption({
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "天(1)",
            "天(2)",
            "天(3)",
            "天(4)",
            "天(5)",
            "天(6)",
            "天(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BlackDotlist,
          },
          {
            name: "Block",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            // data:[20,10,10,10]
            data: Blocklist,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDotlist,
          },
          {
            name: "Line",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Linelist,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Muralist,
          },
          {
            name: "Total",
            type: "line",
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: totallist,
          },
        ],
      });
    },

    // // 第三个柱状图
    theerbra() {
      // let echdata = sessionStorage.getItem("setlist");
      // let datatemp = JSON.parse(echdata);
      // console.log("======================>", datatemp.defectNum);
      var keyname = [];
      var BlackDotlist = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      var totallist = [];
      // 年
      // var year_a = this.inNg.year;
      for (let i = 0; i < this.inNg.year.length; i++) {
        keyname.push(this.inNg.year[i].name);
        if (this.inNg.year[i].name == "BlackDot") {
          BlackDotlist.push(this.inNg.year[i].year_1);
        } else if (this.inNg.year[i].name == "Block") {
          Blocklist.push(this.inNg.year[i].year_1);
        } else if (this.inNg.year[i].name == "BrightDot") {
          BrightDotlist.push(this.inNg.year[i].year_1);
        } else if (this.inNg.year[i].name == "Line") {
          Linelist.push(this.inNg.year[i].year_1);
        } else if (this.inNg.year[i].name == "Mura") {
          Muralist.push(this.inNg.year[i].year_1);
        } else if (this.inNg.year[i].name == "total") {
          totallist.push(this.inNg.year[i].year_1);
        }
      }

      for (let i = 0; i < this.inNg.quarter.length; i++) {
        if (this.inNg.quarter[i].name == "BlackDot") {
          BlackDotlist.push(this.inNg.quarter[i].quarter_1);
          BlackDotlist.push(this.inNg.quarter[i].quarter_2);
        } else if (this.inNg.quarter[i].name == "Block") {
          Blocklist.push(this.inNg.quarter[i].quarter_1);
          Blocklist.push(this.inNg.quarter[i].quarter_2);
        } else if (this.inNg.quarter[i].name == "BrightDot") {
          BrightDotlist.push(this.inNg.quarter[i].quarter_1);
          BrightDotlist.push(this.inNg.quarter[i].quarter_2);
        } else if (this.inNg.quarter[i].name == "Line") {
          Linelist.push(this.inNg.quarter[i].quarter_1);
          Linelist.push(this.inNg.quarter[i].quarter_2);
        } else if (this.inNg.quarter[i].name == "Mura") {
          Muralist.push(this.inNg.quarter[i].quarter_1);
          Muralist.push(this.inNg.quarter[i].quarter_2);
        } else if (this.inNg.quarter[i].name == "total") {
          totallist.push(this.inNg.quarter[i].quarter_1);
          totallist.push(this.inNg.quarter[i].quarter_2);
        }
      }

      for (let i = 0; i < this.inNg.month.length; i++) {
        if (this.inNg.month[i].name == "BlackDot") {
          BlackDotlist.push(this.inNg.month[i].month_1);
          BlackDotlist.push(this.inNg.month[i].month_2);
          BlackDotlist.push(this.inNg.month[i].month_3);
        } else if (this.inNg.month[i].name == "Block") {
          Blocklist.push(this.inNg.month[i].month_1);
          Blocklist.push(this.inNg.month[i].month_2);
          Blocklist.push(this.inNg.month[i].month_3);
        } else if (this.inNg.month[i].name == "BrightDot") {
          BrightDotlist.push(this.inNg.month[i].month_1);
          BrightDotlist.push(this.inNg.month[i].month_2);
          BrightDotlist.push(this.inNg.month[i].month_3);
        } else if (this.inNg.month[i].name == "Line") {
          Linelist.push(this.inNg.month[i].month_1);
          Linelist.push(this.inNg.month[i].month_2);
          Linelist.push(this.inNg.month[i].month_3);
        } else if (this.inNg.month[i].name == "Mura") {
          Muralist.push(this.inNg.month[i].month_1);
          Muralist.push(this.inNg.month[i].month_2);
          Muralist.push(this.inNg.month[i].month_3);
        } else if (this.inNg.month[i].name == "total") {
          totallist.push(this.inNg.month[i].month_1);
          totallist.push(this.inNg.month[i].month_2);
          totallist.push(this.inNg.month[i].month_3);
        }
      }

      for (let i = 0; i < this.inNg.week.length; i++) {
        if (this.inNg.week[i].name == "BlackDot") {
          BlackDotlist.push(this.inNg.week[i].week_1);
          BlackDotlist.push(this.inNg.week[i].week_2);
          BlackDotlist.push(this.inNg.week[i].week_3);
          BlackDotlist.push(this.inNg.week[i].week_4);
        } else if (this.inNg.week[i].name == "Block") {
          Blocklist.push(this.inNg.week[i].week_1);
          Blocklist.push(this.inNg.week[i].week_2);
          Blocklist.push(this.inNg.week[i].week_3);
          Blocklist.push(this.inNg.week[i].week_4);
        } else if (this.inNg.week[i].name == "BrightDot") {
          BrightDotlist.push(this.inNg.week[i].week_1);
          BrightDotlist.push(this.inNg.week[i].week_2);
          BrightDotlist.push(this.inNg.week[i].week_3);
          BrightDotlist.push(this.inNg.week[i].week_4);
        } else if (this.inNg.week[i].name == "Line") {
          Linelist.push(this.inNg.week[i].week_1);
          Linelist.push(this.inNg.week[i].week_2);
          Linelist.push(this.inNg.week[i].week_3);
          Linelist.push(this.inNg.week[i].week_4);
        } else if (this.inNg.week[i].name == "Mura") {
          Muralist.push(this.inNg.week[i].week_1);
          Muralist.push(this.inNg.week[i].week_2);
          Muralist.push(this.inNg.week[i].week_3);
          Muralist.push(this.inNg.week[i].week_4);
        } else if (this.inNg.week[i].name == "total") {
          totallist.push(this.inNg.week[i].week_1);
          totallist.push(this.inNg.week[i].week_2);
          totallist.push(this.inNg.week[i].week_3);
          totallist.push(this.inNg.week[i].week_4);
        }
      }

      for (let i = 0; i < this.inNg.day.length; i++) {
        if (this.inNg.day[i].name == "BlackDot") {
          BlackDotlist.push(this.inNg.day[i].day_1);
          BlackDotlist.push(this.inNg.day[i].day_2);
          BlackDotlist.push(this.inNg.day[i].day_3);
          BlackDotlist.push(this.inNg.day[i].day_4);
          BlackDotlist.push(this.inNg.day[i].day_5);
          BlackDotlist.push(this.inNg.day[i].day_6);
          BlackDotlist.push(this.inNg.day[i].day_7);
        } else if (this.inNg.day[i].name == "Block") {
          Blocklist.push(this.inNg.day[i].day_1);
          Blocklist.push(this.inNg.day[i].day_2);
          Blocklist.push(this.inNg.day[i].day_3);
          Blocklist.push(this.inNg.day[i].day_4);
          Blocklist.push(this.inNg.day[i].day_5);
          Blocklist.push(this.inNg.day[i].day_6);
          Blocklist.push(this.inNg.day[i].day_7);
        } else if (this.inNg.day[i].name == "BrightDot") {
          BrightDotlist.push(this.inNg.day[i].day_1);
          BrightDotlist.push(this.inNg.day[i].day_2);
          BrightDotlist.push(this.inNg.day[i].day_3);
          BrightDotlist.push(this.inNg.day[i].day_4);
          BrightDotlist.push(this.inNg.day[i].day_5);
          BrightDotlist.push(this.inNg.day[i].day_6);
          BrightDotlist.push(this.inNg.day[i].day_7);
        } else if (this.inNg.day[i].name == "Line") {
          Linelist.push(this.inNg.day[i].day_1);
          Linelist.push(this.inNg.day[i].day_2);
          Linelist.push(this.inNg.day[i].day_3);
          Linelist.push(this.inNg.day[i].day_4);
          Linelist.push(this.inNg.day[i].day_5);
          Linelist.push(this.inNg.day[i].day_6);
          Linelist.push(this.inNg.day[i].day_7);
        } else if (this.inNg.day[i].name == "Mura") {
          Muralist.push(this.inNg.day[i].day_1);
          Muralist.push(this.inNg.day[i].day_2);
          Muralist.push(this.inNg.day[i].day_3);
          Muralist.push(this.inNg.day[i].day_4);
          Muralist.push(this.inNg.day[i].day_5);
          Muralist.push(this.inNg.day[i].day_6);
          Muralist.push(this.inNg.day[i].day_7);
        } else if (this.inNg.day[i].name == "total") {
          totallist.push(this.inNg.day[i].day_1);
          totallist.push(this.inNg.day[i].day_2);
          totallist.push(this.inNg.day[i].day_3);
          totallist.push(this.inNg.day[i].day_4);
          totallist.push(this.inNg.day[i].day_5);
          totallist.push(this.inNg.day[i].day_6);
          totallist.push(this.inNg.day[i].day_7);
        }
      }
      let mythreebar = this.$echarts.init(
        document.getElementById("mythreebar")
      );
      mythreebar.setOption({
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "天(1)",
            "天(2)",
            "天(3)",
            "天(4)",
            "天(5)",
            "天(6)",
            "天(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BlackDotlist,
          },
          {
            name: "Block",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            // data:[20,10,10,10]
            data: Blocklist,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDotlist,
          },
          {
            name: "Line",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Linelist,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Muralist,
          },
          {
            name: "Total",
            type: "line",
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: totallist,
          },
        ],
      });
    },

    //  tabls选项卡

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style  scoped>
.table_content {
  width: 100%;
  position: relative;
  /* margin-top:5px; */
}
.table_chart {
  width: 100%;
  display: flex;
   min-width: 900px;
  justify-content: space-between;
  margin-top: 10px;
  background: #ffffff;
}
.table_to {
  width: 100%;
  background: #ffffff;
  margin-top: 10px;
}
.table_lsit {
  margin-top: 10px;
}

.table_serch {
  width: 100%;
  min-width:900px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* position: relative; */
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  /* width:200px; */
  display: flex;
  margin-right: 10px;
  margin-bottom: 10px;
 
 
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}

#myChart {
  width:1250px;
  height:360px;
}
.my_table {
  width: 100%;
  margin: 10px auto;
  margin-left: 0px;
}

#tabsbox {
  margin-left: 10px;
}
.first_table {
  width: 100%;
}
.first_table_item {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
  margin-top: 20px;
}
.second_table {
  width: 100%;
}

.second_table_item {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
  margin-top: 20px;
}
.third_table {
  width: 100%;
}
.third_table_item {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
  margin-top: 20px;
}
#my_second {
  width:1250px;
  height: 300px;
}
#mythreebar {
  width: 1250px;
  height: 300px;
}

.tableyon > th {
  padding: 0 !important;
  height: 20px;
  line-height: 20px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 30%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}


</style>